@require './config'

$mobileSidebarWidth = $sidebarWidth * 0.82

// narrow desktop / iPad
@media (max-width: $MQNarrow)
  .sidebar
    font-size 15px
    width $mobileSidebarWidth
  // .page
  //   padding-left $mobileSidebarWidth

// wide mobile
@media (max-width: 1000px)
  .sidebar
    top 0
    padding-top 20px
    transform translateX(-100%)
    transition transform .2s ease
    z-index 99999 !important
    box-shadow: 0px 0px 20px 0px rgba(0,0,0,.05)
    .effect1
      display none
    .nav-links
      border-bottom: 0px
      .nav-item
        a
          padding 0px !important
          text-align: left !important
          justify-content: flex-start
          &:after
            display none
  .page
    padding-left 0
    margin-left: 0px !important
    width: 100%
  .theme-container
    &.sidebar-open
      .sidebar
        transform translateX(0)
    &.no-navbar
      .sidebar
        padding-top: 0

@media (max-width: 500px)
  .center
    padding 10px 0px

// narrow mobile
@media (max-width: $MQMobileNarrow)
  h1
    font-size 1.9rem
  .content
    div[class*="language-"]
      margin 0.85rem -1.5rem
      border-radius 0
